<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>疫情地图展示</title>
		<style>
			.container {
				width: 100%;
				margin: 0 auto;
			}

			#myEcharts {
				width: 100%;
				height: 750px;
				/* border: solid 1px red; */
				margin: 0 auto;
			}

			.tui {
				float: right;
			}
		</style>
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/fonts.css">
		<link rel="stylesheet" href="css/style.css">


		<script src="js/jquery.mini.js"></script>

		<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>

		<!--引入中国的地图数据js文件，引入后会自动注册地图名字和数据-->
		<script src="js/china.js"></script>

	</head>

	<body>

		<div class="container">
			<a class="button button-primary button-sm tui" href="Requirelobby.html">返回需求大厅</a>
			<h3>累计确诊人数如下：</h3>
			<!--为echarts准备一个dom容器-->
			<div id="myEcharts"></div>
		</div>


		<script>
			//初始化echarts实例
			var myChart = echarts.init(document.getElementById('myEcharts'));
			// 指定图表的配置项和数据
			option = {
				title: {
					text: '中国疫情图',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					data: ['中国疫情图']
				},
				visualMap: {
					type: 'piecewise',
					pieces: [{
							min: 1000,
							max: 1000000,
							label: '大于等于1000人',
							color: '#372a28'
						},
						{
							min: 500,
							max: 999,
							label: '确诊500-999人',
							color: '#4e160f'
						},
						{
							min: 100,
							max: 499,
							label: '确诊100-499人',
							color: '#974236'
						},
						{
							min: 10,
							max: 99,
							label: '确诊10-99人',
							color: '#ee7263'
						},
						{
							min: 1,
							max: 9,
							label: '确诊1-9人',
							color: '#f5bba7'
						},
					],
					color: ['#E0022B', '#E09107', '#A3E00B']
				},
				toolbox: {
					show: true,
					orient: 'vertical',
					left: 'right',
					top: 'center',
					feature: {
						mark: {
							show: true
						},
						dataView: {
							show: true,
							readOnly: false
						},
						restore: {
							show: true
						},
						saveAsImage: {
							show: true
						}
					}
				},
				roamController: {
					show: true,
					left: 'right',
					mapTypeControl: {
						'china': true
					}
				},

				series: [{
					name: '确诊数',
					type: 'map',
					mapType: 'china',
					roam: false,
					label: {
						show: true,
						color: 'rgb(249, 249, 249)'
					},
					data: [{
						name: '北京',
						value: 212
					}, {
						name: '天津',
						value: 60
					}, {
						name: '上海',
						value: 208
					}, {
						name: '重庆',
						value: 337
					}, {
						name: '河北',
						value: 126
					}, {
						name: '河南',
						value: 675
					}, {
						name: '云南',
						value: 117
					}, {
						name: '辽宁',
						value: 74
					}, {
						name: '黑龙江',
						value: 155
					}, {
						name: '湖南',
						value: 593
					}, {
						name: '安徽',
						value: 480
					}, {
						name: '山东',
						value: 270
					}, {
						name: '新疆',
						value: 29
					}, {
						name: '江苏',
						value: 308
					}, {
						name: '浙江',
						value: 829
					}, {
						name: '江西',
						value: 476
					}, {
						name: '湖北',
						value: 13522
					}, {
						name: '广西',
						value: 139
					}, {
						name: '甘肃',
						value: 55
					}, {
						name: '山西',
						value: 74
					}, {
						name: '内蒙古',
						value: 34
					}, {
						name: '陕西',
						value: 142
					}, {
						name: '吉林',
						value: 42
					}, {
						name: '福建',
						value: 179
					}, {
						name: '贵州',
						value: 56
					}, {
						name: '广东',
						value: 797
					}, {
						name: '青海',
						value: 15
					}, {
						name: '西藏',
						value: 1
					}, {
						name: '四川',
						value: 282
					}, {
						name: '宁夏',
						value: 34
					}, {
						name: '海南',
						value: 79
					}, {
						name: '台湾',
						value: 10
					}, {
						name: '香港',
						value: 15
					}, {
						name: '澳门',
						value: 9
					}]
				}]
			};

			//使用指定的配置项和数据显示图表
			myChart.setOption(option);


			//     series: [
			//       {
			//         name: '确诊数',
			//         type: 'map',
			//         mapType: 'china',
			//         roam: false,
			//         label: {
			//           show: true,
			//           color: 'rgb(249, 249, 249)'
			//         },
			//         data: []
			//       }
			//     ]
			//   };

			//   //使用指定的配置项和数据显示图表
			//   myChart.setOption(option);

			//   //获取数据
			//   function getData() {
			//     $.ajax({
			//       // url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5",
			// url:"https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5&callback=jQuery34102581268431257997_1582545445186&_=1582545445187",

			//       dataType: "jsonp",
			//       success: function (data) {
			//         //  console.log(data.data)
			//         var res = data.data || "";
			//         res = JSON.parse(res);
			//         var newArr = [];
			//         // // newArr的数据格式为：
			//         // [{
			//         //   name: '北京11',
			//         //   value: 2120
			//         // }, {
			//         //   name: '天津',
			//         //   value: 6000
			//         // }]
			//         if (res) {
			//           //获取到各个省份的数据
			//           var province = res.areaTree[0].children;
			//           for (var i = 0; i < province.length; i++) {
			//             var json = {
			//               name: province[i].name,
			// 		// adcode: province[i].total.confirm
			//               value: province[i].total.confirm
			//             }
			//             newArr.push(json)
			//           }
			//           console.log(newArr)
			//           console.log(JSON.stringify(newArr))
			//           //使用指定的配置项和数据显示图表
			//           myChart.setOption({
			//             series: [
			//               {
			//                 name: '确诊数',
			//                 type: 'map',
			//                 mapType: 'china',
			//                 roam: false,
			//                 label: {
			//                   show: true,
			//                   color: 'rgb(249, 249, 249)'
			//                 },
			//                 data: newArr
			//               }
			//             ]
			//           });
			//         }
			//       }

			//     })
			//   }
			//   getData();
		</script>
	</body>
</html>
